<template>
  <div class="score">
    <div class="score-item">
      <div class="title">
        <div class="index">1</div>
        <div class="word">我是题目我是题目我是题目我是题目我是题目？</div>
      </div>
      <div class="answer-list">
        <div class="answer-item active">
          <div class="select"></div>
          <div class="word">答案1</div>
        </div>
        <div class="answer-item">
          <div class="select"></div>
          <div class="word">
            答案2答案2答案2答案2答案2答案2答案2答案2答案2答案2
          </div>
        </div>
        <div class="answer-item">
          <div class="select"></div>
          <div class="word">答案3</div>
        </div>
      </div>
    </div>
    <div class="score-item">
      <div class="title">
        <div class="index">1</div>
        <div class="word">我是题目我是题目我是题目我是题目我是题目？</div>
      </div>
      <div class="answer-list">
        <div class="answer-item active">
          <div class="select"></div>
          <div class="word">答案1</div>
        </div>
        <div class="answer-item">
          <div class="select"></div>
          <div class="word">
            答案2答案2答案2答案2答案2答案2答案2答案2答案2答案2
          </div>
        </div>
        <div class="answer-item">
          <div class="select"></div>
          <div class="word">答案3</div>
        </div>
      </div>
    </div>
    <div class="footer-btn">提交</div>
  </div>
</template>

<script></script>

<style lang="less" scoped>
.score {
  padding: 15px 15px;
  box-sizing: border-box;
  background: #fff;
  min-height: 100vh;
  padding-bottom: 64px;
  .score-item {
    margin-bottom: 20px;
    .title {
      display: flex;
      .index {
        line-height: 20px;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #cc334f;
        color: #fff;
        font-size: 14px;
        text-align: center;
        margin-right: 8px;
      }
      .word {
        line-height: 22px;
        text-align: justify;
        font-size: 16px;
        // font-weight: bold;
        color: #000;
      }
    }
    .answer-list {
      padding-left: 28px;
      .answer-item {
        display: flex;
        margin-top: 10px;
        .select {
          width: 14px;
          height: 14px;
          box-sizing: border-box;
          border: 1px solid #999;
          border-radius: 100%;
          margin-right: 6px;
          margin-top: 3px;
        }
        .word {
          width: calc(100% - 20px);
          text-align: justify;
          line-height: 20px;
          font-size: 15px;
          color: #666;
        }
      }
      .answer-item.active {
        .select {
          width: 16px;
          height: 16px;
          border: none;
          background: url('../assets/selected.png') no-repeat center;
          background-size: 100%;
          margin-top: 1px;
        }
        .word {
          color: #000;
        }
      }
    }
  }
  .footer-btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #cc334f;
    color: #fff;
    font-size: 15px;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
